সিএসএস-এ কোনো এলিমেন্টকে উজ্জ্বল বা অনুজ্জ্বল অথবা সচ্ছ বা অসচ্ছ করতে opacity প্রোপার্টি ব্যবহার করবো।
ট্রান্সপারেন্ট ইমেজ
কোনো ইমেজকে সচ্ছ বা অসচ্ছ করতে আমরা opacity প্রোপার্টি ব্যবহার করতে পারি। এই ক্ষেত্রে আমরা 0.0 থেকে 1.0 পর্যন্ত ভ্যালু নিতে পারবো। এখানে ভ্যালু যত কম হবে তত বেশি অসচ্ছ বা ট্রান্সপারেন্ট হয়ঃ
opacity 0.3
opacity 0.5
opacity 1
ডিফল্ট
kt_satt_skill_example_id=939
ট্রান্সপারেন্ট হোভার ইফেক্ট
এখন আমরা opacity এবং :hover এই দুইটি প্রোপার্টিকে একত্রে ব্যবহার করে আমরা ইমেজে হোভারের মধ্যে opacity ইফেক্ট দিবঃ
kt_satt_skill_example_id=942
এই ইমেজ গুলোতে হোভার করলে ইমেজ গুলো অসচ্ছ দেখাবে। এই উদাহরণটি আগের উদাহরনের ঠিক বিপরীত করেঃ
kt_satt_skill_example_id=944
RGBA মাধ্যমে ট্রান্সপারেন্ট
আপনি যদি একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করতে চান, সেক্ষেত্রে আপনি RGBA ব্যবহার করতে পারেন। RGBA কালার ভ্যালু হচ্ছে RGB কালারের প্রসারিত অংশ যার সাথে alpha channel থাকে, যা কালারের opacity নির্দেশ করে। নিচের উদাহরনে শুধু ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করা হয়েছে কিন্তু টেক্সট গুলোতে করা হয়নিঃ
100% opacity
60% opacity
30% opacity
10% opacity
টিপসঃ RGBA কালার সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস কালার অধ্যায়টি দেখুন।
kt_satt_skill_example_id=951
ট্রান্সপারেন্ট টেক্সট বক্স
তারুণ্যই সফলতা, তারুণ্যই স্যাট। তারুণ্যেই গড়বে ডিজিটাল বাংলাদেশ।
kt_satt_skill_example_id=954
Read more
